<template>
  <!-- 抗归属关联 -->
  <div>

    <!--    表格顶部-->
    <div class="flex-container">
      <!-- 前两个元素靠最右边 -->
      <div class="flex-group-right">
        <span style="textStyle">任务列表</span>
        <el-button plain
                   @click="dialogVisible1 = true"
                   style="margin-left: 5px; background: linear-gradient(228deg, #FFC04B 0%, #FFA216 100%); color: #fff;">
          新增设备
        </el-button>
        <el-button class="batchDelete" plain @click="handleBatchDelete">
          批量删除
        </el-button>
      </div>
      <!-- 后三个元素靠最左边 -->
      <div class="flex-group-left">

      </div>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog title="新增设备信息" :visible.sync="dialogVisible1" width="45%">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <div>
        <!-- 前两行 -->
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备IP地址：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input1" placeholder="请输入"/>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备归属组织：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input2" placeholder="请输入"/>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备类型：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input3" placeholder="请输入"/>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              状态：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input4" placeholder="请输入"/>
          </el-col>
        </el-row>
        <!-- 后两行 -->
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备信息描述(选填)：
            </div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="input5" placeholder="请输入"/>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              备注：
            </div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="input6" placeholder="请输入"/>
          </el-col>
        </el-row>
      </div>
      <!-- 两个按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>

    <div style=" background-color: white">
      <!-- 删除弹窗 -->
      <template>
        <div class="mainTable">
          <el-table :data="currentTableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="设备名称" prop="deviceName"/>
            <el-table-column label="归属组织名称" prop="organizationName"/>
            <el-table-column label="知识图谱分析" prop="knowledgeGraphAnalysis" show-overflow-tooltip sortable>
              <el-button type="text" @click="toindex4">
                图谱链接
              </el-button>
            </el-table-column>
            <el-table-column label="抗设备归属任务执行状态" prop="taskExecutionStatus" show-overflow-tooltip sortable/>
            <el-table-column label="任务创建时间" prop="taskCreateTime" show-overflow-tooltip/>
            <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip/>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPageChange"
                         :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]"
                         :total="totalDataCount"
                         layout="total, sizes, prev, pager, next, jumper" style="margin-top: 20px; text-align: center;">
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      dialogVisible: false,
      dialogVisible1: false,
      selectedRows: [], // 存放选中的行
      activeName: "first",
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的数据条数
      totalDataCount: 0, // 总数据量，初始为0，将在数据加载时设置
      tableData: [],
    };
  },

  methods: {
    toindex4() {
      this.$router.push('/devicehomeScreen')
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelectiselection(val) {
      console.log("选中的行：", val);
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 当改变每页显示条数时重置页码为1
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows; // 更新选中的行
    },
    handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message({
          message: '请至少选择一个任务进行删除',
          type: 'warning'
        });
        return;
      }

      // 使用 $confirm 来提示用户确认删除操作
      this.$confirm('此操作将永久删除选中的任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，执行删除操作
        this.tableData = this.tableData.filter(item => {
          return !this.selectedRows.some(row => row.id === item.id);
        });
        // 清空选中的行
        this.selectedRows = [];
        this.$message({
          message: '批量删除成功',
          type: 'success'
        });
      }).catch(() => {
        // 用户点击取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  computed: {
    currentTableData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
  created() {
    // 页面加载时，获取数据列表
    this.tableData = [
      {
        id: 1,
        deviceName: "设备1",
        organizationName: "zxait",
        taskExecutionStatus: "已完成",
        taskCreateTime: "2023-04-01 10:00:00",
        updateTime: "2023-04-02 14:30:00",
      },
      {
        id: 2,
        deviceName: "设备2",
        organizationName: "zxsj",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-04-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备3",
        organizationName: "dwddw",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备4",
        organizationName: "rtjsztr",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备5",
        organizationName: "rehzxd",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备6",
        organizationName: "zrhfdnz",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备6",
        organizationName: "zrhfdnz",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备6",
        organizationName: "zrhfdnz",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备6",
        organizationName: "zrhfdnz",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备6",
        organizationName: "zrhfdnz",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
      {
        id: 3,
        deviceName: "设备6",
        organizationName: "zrhfdnz",
        taskExecutionStatus: "正在进行中",
        taskCreateTime: "2024-04-01 10:00:00",
        updateTime: "2024-05-02 14:30:00",
      },
    ];
    this.totalDataCount = this.tableData.length; // 设置总数据量
  },
};
</script>

<style lang="scss" scoped>


.mainTable {
  padding: 15px;
  height: 85vh;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中对齐 */
}

.btn {
  margin-left: 60px;
  background: linear-gradient(228deg, #FFC04B 0%, #FFA216 100%);
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}

.flex-group-right {
  margin-left: 15px;
}

.rightBtn {
  margin-right: 55px;
  width: 106px;
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%);
  border-radius: 4px 4px 4px 4px;
}

.textStyle {
  margin-left: 5px;
  width: 96px;
  height: 22px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #535A6C;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-pager li.active {
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%) !important;
  color: white !important;
}
</style>
